<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>辅助性元素 - 页面元素 - layui</title>
<meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  
  <link rel="stylesheet" href="../../../layui/css/layui.css"   media="all">
  <link rel="stylesheet" href="../../../css/Global.css"  media="all">
  
</head>
<body>
<div class="layui-header header header-doc">
  <div class="layui-main">
    <a class="logo" href="../../index.html">
      <img src="../../../res/logo.png" alt="layui">
    </a>
    <ul class="layui-nav">
      <li class="layui-nav-item layui-this">

      </li>
      <li class="layui-nav-item ">

      </li>
      
      <li class="layui-nav-item">

      </li>
    </ul>
  </div>
</div>
<div class="layui-main site-inline">
  <div class="site-tree">
  <ul class="layui-tree">
  
    <li><h2>基础说明</h2></li>
  
    <li class="site-tree-noicon ">
      <a href="../index.html" ><cite>开始使用</cite></a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../base/infrastructure.html" >
        <cite>底层支撑</cite>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../base/element.html" >
        <cite>页面元素</cite>
        <em>规范 / 公共类、属性</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../base/modules.html" >
        <cite>组件规范</cite>
        <em>使用 / 模块扩展</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../base/faq.html">
        <cite>常见问题</cite>
      </a>
    </li>
    
    <li><h2>页面元素</h2></li>
    
    
    
    <li class="site-tree-noicon ">
      <a href="color.html">
        <cite>颜色</cite>
        <em>内置的色值参考</em>
      </a>
    </li>
    
    <li class="site-tree-noicon ">
      <a href="icon.html">
        <cite>图标</cite>
        <em>字体图标</em>
      </a>
    </li>
    <li class="site-tree-noicon layui-this">
      <a href="auxiliar.html">
        <cite>辅助</cite>
        <em>引用 / 分块 / 横线…</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="button.html" >
        <cite>按钮</cite>
        <em>button组</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="form.html">
        <cite>表单</cite>
        <em>form元素集合</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="nav.html">
        <cite>导航</cite>
        <em>菜单 / Tab / 面包屑 …</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="table.html">
        <cite>表格</cite>
        <em>table - v1.0.5 新增</em>
      </a>
    </li>
   
    
    <li><h2>内置组件</h2></li>
    
    <li >
      <a href="../modules/layer.html">
        <i class="layui-icon" style="top: 3px;">&#xe638;</i><cite>弹出层</cite>
        <em>layer</em>
      </a>
    </li>
    <li >
      <a href="../modules/layim.html">
        <i class="layui-icon" style="position: relative; top: 3px;">&#xe63a;</i>
        <cite>即时通讯</cite>
        <em>layim</em>
      </a>
    </li>
    <li >
      <a href="../modules/laydate.html">
        <i class="layui-icon" style="top: 1px;">&#xe637;</i><cite>日期时间选择</cite>
        <em>laydate</em>
      </a>
    </li>
    <li >
      <a href="../modules/laypage.html">
        <i class="layui-icon">&#xe633;</i><cite>分页</cite>
        <em>laypage</em>
      </a>
    </li>
    <li >
      <a href="../modules/laytpl.html">
        <i class="layui-icon">&#xe628;</i><cite>模板引擎</cite>
        <em>laytpl</em>
      </a>
    </li>
    <li >
      <a href="../modules/layedit.html">
        <i class="layui-icon">&#xe639;</i>
        <cite>富文本编辑器</cite>
        <em>layedit</em>
      </a>
    </li>
    <li >
      <a href="../modules/form.html">
        <i class="layui-icon" style="top: 2px;">&#xe63c;</i>
        <cite>表单</cite>
        <em>form</em>
      </a>
    </li>
    <li >
      <a href="../modules/upload.html">
        <i class="layui-icon">&#xe62f;</i>
        <cite>文件上传</cite>
        <em>upload</em>
      </a>
    </li>
    <li >
      <a href="../modules/element.html">
        <i class="layui-icon" style="top: 1px; font-size: 18px;">&#xe62a;</i>
        <cite>常用元素操作</cite>
        <em>element</em>
      </a>
    </li>
    <li >
      <a href="../modules/tree.html">
        <i class="layui-icon">&#xe62e;</i>
        <cite>树形菜单</cite>
        <em>tree</em>
      </a>
    </li>
    
    <li >
      <a href="../modules/util.html">
        <i class="layui-icon">&#xe631;</i>
        <cite>工具块</cite>
        <em>util</em>
      </a>
    </li>
    <li >
      <a href="../modules/flow.html">
        <i class="layui-icon">&#xe636;</i>
        <cite>流加载</cite>
        <em>flow</em>
      </a>
    </li>
    <li >
      <a href="../modules/code.html">
        <i class="layui-icon" style="top: 1px;">&#xe635;</i>
        <cite>代码修饰器</cite>
        <em>code</em>
      </a>
    </li>
  </ul>
</div>

  <div class="site-content">
    <h1 class="site-h1">辅助性元素 - 页面元素</h1>
    <div class="site-tips site-text">
      <p>
        本篇主要集中罗列页面中的一些辅助元素，如：引用块、字段集区块、圆角、横线等等
      </p>
    </div>
    
    
<div style="margin: 15px 0; text-align: center; background-color: #F2F2F2;">
  <ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="9841027833"></ins>
</div>

    
    <div class="site-title">
      <fieldset><legend><a name="quote">引用</a></legend></fieldset>
    </div>    
    <div class="site-text">
      <blockquote class="layui-elem-quote">引用区域的文字</blockquote>
      <blockquote class="layui-elem-quote layui-quote-nm">引用区域的文字</blockquote>
      <p>目前内置了上述两种风格</p>
      <pre class="layui-code" lay-title="HTML结构">
&lt;blockquote class="layui-elem-quote">引用区域的文字&lt;/blockquote>
&lt;blockquote class="layui-elem-quote layui-quote-nm">引用区域的文字&lt;/blockquote>
      </pre>
    </div>
    
    <div class="site-title">
      <fieldset><legend><a name="fieldset">字段集</a></legend></fieldset>
    </div>    
    <div class="site-text">
      <fieldset class="layui-elem-field">
        <legend>字段集区块 - 默认风格</legend>
        <div class="layui-field-box">
          内容区域。
        </div>
      </fieldset>
      <p>同样内置了两种风格，另一种风格即该文档的标题横线：字段集一行</p>
      <pre class="layui-code" lay-title="HTML结构">
&lt;fieldset class="layui-elem-field">
  &lt;legend>字段集区块 - 默认风格&lt;/legend>
  &lt;div class="layui-field-box">
    内容区域
  &lt;/div>
&lt;/fieldset>
 
&lt;fieldset class="layui-elem-field layui-field-title">
  &lt;legend>字段集区块 - 横线风格&lt;/legend>
  &lt;div class="layui-field-box">
    内容区域
  &lt;/div>
&lt;/fieldset>
你可以把它看作是一个有标题的横线
      </pre>
    </div>
    
    <div class="site-title">
      <fieldset><legend><a name="hr">横线</a></legend></fieldset>
    </div>    
    <div class="site-text">
      <p>即直接写hr标签，无需定义class</p>
      华丽的
      <hr>
      分割线
      <pre class="layui-code" lay-title="HTML结构">
华丽的
&lt;hr>
分割线
      </pre>
    </div>
    
    <div class="site-title">
      <fieldset><legend><a name="other">备注</a></legend></fieldset>
    </div>
    <div class="site-text">
      <p>后续版本也将不定期增加更多辅助性元素</p>
    </div>
    
    <div class="layui-elem-quote">
  <p>Layui - 用心与你沟通</p>
</div>
    
  </div>
</div>
  
<div class="layui-footer footer footer-doc">
  <div class="layui-main">
    <p>2017 &copy; <a href="../../index.html">layui.com</a> MIT license</p>
    <p>
      <a href="../../../fly.layui.com/jie/3147.html" target="_blank">捐赠作者</a>
      <!--<a href="javascript:layer.msg('暂无此页');">关于我们</a>-->
      <a href="mailto:xianxin@layui.com">合作联系</a>
      <a href="../../../github.com/sentsin/layui/index.html" target="_blank">Git仓库</a>
      <a href="../../../fly.layui.com/jie/2461.html"  target="_blank">微信公众号</a>
    </p>
  </div>
</div>

<div class="site-tree-mobile layui-hide">
  <i class="layui-icon">&#xe602;</i>
</div>
<div class="site-mobile-shade"></div>
<script src="../../../layui/layui.js" charset="utf-8"></script>
<script src="../../Js/doc.js" type="text/javascript"></script>
<script>

layui.use(['element', 'layer'], function(){
  var element = layui.element()
  ,layer = layui.layer;
  
  element.on('tab(docDemoTabBrief)', function(data){
    layer.msg('切到到了'+ data.index + '：' + this.innerHTML);
  });
});
</script>
</body>
</html>